<style lang="less">
  .questionDetail .ivu-card-body {
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
  }

  .questionDetail .addTeam .ivu-card-body {
    width: 100%;
    height: 100%;
    padding: 0;
  }
  .qdt_right{
    position: relative;
    #dropdownList{
      .ivu-select-dropdown{
        top: 95% !important;
        left: 0% !important;
      }
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    .qdt_right{
      position: relative;
      #dropdownList{
        .ivu-select-dropdown{
          top: 102% !important;
          left: -110% !important;
        }
      }
    }
  }
  .ivu-drawer{
    width: 11rem !important;
    .ivu-drawer-content{
      padding: 8px !important;
      box-sizing: border-box !important;
      .ivu-drawer-body{
        padding: 0 !important;
        position: relative !important;
      }
    }
  }
</style>
<template>
  <Row type="flex" justify="center" align="top" class="code-row-bg">
    <Col id="questionPhone1" span="1" :style="phoneStyle?{background:'#ffffff',height:'50px',borderTop: '1px solid #cccccc'}:{background:'#3F88D5',height:'100vh'}">
      <NavLeft :selected="3" :avatar="avatar"></NavLeft>
    </Col>
    <Col id="questionPhone2" span="4" v-if="!phoneStyle">
      <NavMiddle :itemList="itemList"></NavMiddle>
    </Col>
    <Col id="questionPhone3" span="19" style="background:#f5f7f9;height:100vh;">
      <div class="questionDetail">
        <!-- 顶部标题 -->
        <div class="qd_title">
          <div class="qdt_left" @click="goback">
            <Icon type="ios-arrow-back"/>
            返回
          </div>
          <div class="qdt_center">问题详情</div>
          <div class="qdt_right">
            <a href="#" type="text" size="large" class="btn_tools" v-if="!phoneStyle">
              <Icon type="ios-cog" size="20"></Icon>
            </a>
            <Dropdown trigger="click" style="float: right" @on-click="dropdownClick" id="dropdownList">
              <a type="text" size="large" style="float:right" class="btn_tools">
                <Icon type="ios-share-alt" size="20"></Icon>
              </a>
              <DropdownMenu slot="list">
                <DropdownItem name="1">分享</DropdownItem>
                <DropdownItem name="2">引用</DropdownItem>
              </DropdownMenu>
            </Dropdown>
          </div>
        </div>
        <!-- 按钮组 -->
        <div class="topButtons">
          <div class="cit_right">
            <div class="button chargePerson" @click="assign" v-if="detailInfo.problem_status != 3 && detailInfo.problem_status != 2">指派负责人</div>
            <div class="button stop" v-if="detailInfo.problem_status == 3 || detailInfo.problem_status == 2"
                 @click="proStatus(1)">开启
            </div>
            <div class="button stop" v-if="detailInfo.problem_status == 0 || detailInfo.problem_status == 1"
                 @click="proStatus(3)">暂停
            </div>
            <div class="button close" v-if="detailInfo.problem_status == 0 || detailInfo.problem_status == 1"
                 @click="proStatus(2)">关闭
            </div>
          </div>
          <div class="footer" v-if="detailInfo.step != 9 && detailInfo.problem_status != 3 && detailInfo.problem_status != 2">
            <!-- 未发起会签 -->
            <div class="buttons" v-if="detailInfo.trials_status == 0">
              <Button @click="trialsClick(1)" :size="phoneStyle?'small':''">会签</Button>
              <Button @click="trialsClick(2)" :size="phoneStyle?'small':''">报审</Button>
            </div>
            <div v-else>
              <!-- 没有发起审批修改 -->
              <div v-if="detailInfo.is_stepmodify == 0">
                <!-- 通过 -->
                <div class="buttons" v-if="detailInfo.trials_status == 1">
                  <Button type="primary" style="color: #fff" @click="amendmentClick" :size="phoneStyle?'small':''">申请修改</Button>
                  <Button @click="signResultClick(1)" :size="phoneStyle?'small':''" :style="{'border': phoneStyle?'1px solid #56b44a':'' }">会签结果({{detailInfo.yi_num}}/{{detailInfo.hui_num}})</Button>
                  <span class="signStatus" v-if="!phoneStyle"><Icon type="md-checkmark"/>会签通过</span>
                </div>
                <!-- 进行中会签/未通过 -->
                <div class="buttons" v-if="detailInfo.trials_status == -1">
                  <!-- 已会签或者不是会签人员 -->
                  <div class="is_trials" v-if="detailInfo.is_trials == 0">
                    <Button type="primary" style="color: #fff" @click="amendmentClick" :size="phoneStyle?'small':''">申请修改</Button>
                    <Button @click="signResultClick(1)" :size="phoneStyle?'small':''" :style="{'border': detailInfo.yi_num == detailInfo.hui_num && phoneStyle?'1px solid #f15c60': ''}">会签结果({{detailInfo.yi_num}}/{{detailInfo.hui_num}})</Button>
                    <span class="signStatus signStatusCant" v-if="detailInfo.yi_num == detailInfo.hui_num && !phoneStyle"><Icon
                        type="md-close"/>会签不通过 请修改内容</span>
                  </div>
                  <!-- 未会签 -->
                  <div class="is_trials" v-if="detailInfo.is_trials == 1">
                    <Button type="primary" style="color: #fff" @click="handleClick(1,1)" :size="phoneStyle?'small':''">同意</Button>
                    <Button @click="handleClick(2,1)" :size="phoneStyle?'small':''">不同意</Button>
                  </div>
                </div>
              </div>
              <!-- 有审批修改 -->
              <div v-else>
                <!-- 有审核内容 -->
                <div class="buttons" v-if="detailInfo.is_stepmodify == 1">
                  <Button type="primary" style="color: #fff" @click="handleClick(1,2)" v-html="phoneStyle?'同意修改':'同意修改申请'"></Button>
                  <Button @click="handleClick(2,2)" v-html="phoneStyle?'不同意修改':'不同意修改申请'"></Button>
                </div>
                <div class="buttons" v-if="detailInfo.is_stepmodify == 2">
                  <Button>修改申请中</Button>
                </div>
                <div class="buttons" v-if="detailInfo.is_stepmodify == 3">
                  <Button type="primary" style="color: #fff" @click="amendmentClick">申请修改</Button>
                  <Button @click="signResultClick(2)">修改申请结果({{detailInfo.yi_num}}/{{detailInfo.hui_num}})</Button>
                  <span class="signStatus signStatusCant" v-if="detailInfo.yi_num == detailInfo.hui_num"><Icon
                      type="md-close"/>申请不通过 请修改内容</span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- 内容 -->
        <div class="qd_content">
          <!-- 问题标题内容 -->
          <div class="con_info">
            <div class="ci_title">
              <div class="cit_left">
                <span class="title">{{detailInfo.title}}</span>
                <div
                    :class="{'level blueL': detailInfo.grade_id == 0,'level yellowL': detailInfo.grade_id == 1,'level orangeL': detailInfo.grade_id == 2,'level redL': detailInfo.grade_id == 3,'level grayL': detailInfo.grade_id == 4}">
                  {{returnColor(detailInfo.grade_id)}}
                </div>
                <span class="updateSpan" @click="updateQues" v-if="detailInfo.problem_status != 3 && detailInfo.problem_status != 2">点击修改</span>
              </div>
            </div>
            <div class="ci_labels" :style="showTitle?'paddingBottom: 12px':'paddingBottom: 0'">
              <span class="ci_label" v-if="showTitle">产品名称：{{detailInfo.product_name}}</span>
              <span class="ci_label" v-if="showTitle">指标：{{detailInfo.product_zhibiao}}</span>
              <span class="ci_label" v-if="showTitle">问题来源：{{detailInfo.problem_source}}</span>
              <span class="ci_label" v-if="showTitle">问题分类：{{detailInfo.problem_category}}</span>
              <span class="ci_label">负责人：<span :class="detailInfo.header_user_name != ''?'':'noCP'"
                                               v-html="detailInfo.header_user_name != ''?detailInfo.header_user_name:'待指派'"></span></span>
              <span class="ci_label" v-if="showTitle">管理员：{{detailInfo.manage_user_name}}</span>
              <span class="ci_label" v-if="showTitle">开始时间：{{detailInfo.create_time}}</span>
              <span class="ci_label">状态：<span
                  :class="{'solution':detailInfo.problem_status == 1,'closed':detailInfo.problem_status == 0}">{{returnStatus(detailInfo.problem_status)}}</span></span>
              <div class="ci_label_more" v-if="phoneStyle" @click="showMore" :style="showTitle?'top: calc(100% - 20px)':'top: 0'">
                <span class="span" v-html="showTitle?'收起更多信息':'展开更多信息'"></span>
                <Icon type="ios-arrow-down" v-if="showTitle" />
                <Icon type="ios-arrow-up" v-if="!showTitle" />
              </div>
            </div>
            <!-- 进度条板块 -->
            <div class="progress" v-if="!phoneStyle">
              <div
                  :class="{'proCon phenomenon':index == 0,'proCon fast':index == 1,'proCon system':index == 2,'proCon experience':index == 3}"
                  v-for="(items,index) in detailInfo.step_list">
                <div :class="val.status == 1?'proCon_node':'proCon_node pnArive'" v-for="(val,ind) in items.item">
                  <div class="pc_title" v-if="index == 2 && ind == items.item.length - 1">
                    <i-switch v-model="detailInfo.system_type == 0?false:true" @on-change="change"/>
                  </div>
                  <div :class="ind == 0 && detailInfo.system_type == 0?'pc_title pc_titleCant':'pc_title'"
                       v-if="index == 2">{{ind == 0?items.name:''}}
                  </div>
                  <div class="pc_title" v-else>{{ind == 0?items.name:''}}</div>
                  <div class="pc_pointDiv" @click="pointClick(val)">
                    <!--
                      1：未到达节点(显示灰色)
                      2：当前节点(未填写，已到达)
                      3：过去已完成节点(显示为蓝色带钩)
                      4：过去未完成节点(修改过去节点，正在会签)
                    -->
                    <div :class="{ 'pc_point arivePoint':val.is_step == 1,
                                  'pc_point noArive':val.status == 1,
                                  'pc_point nowP':val.status == 2,
                                  'pc_point':val.status == 3,
                                  'pc_point signing': val.status == 4}" v-if="index != 2">
                      <Icon type="ios-checkmark" v-if="val.status == 3 && val.is_step != 1"/>
                    </div>
                    <div :class="{ 'pc_point arivePoint':val.is_step == 1 && detailInfo.system_type == 1,
                                  'pc_point noArive':val.status == 1 && detailInfo.system_type == 1,
                                  'pc_point':val.status == 2 && detailInfo.system_type == 1,
                                  'pc_point':val.status == 3 && detailInfo.system_type == 1,
                                  'pc_point signing': val.status == 4 && detailInfo.system_type == 1,
                                  'pc_point cantPoint': detailInfo.system_type == 0,}" v-else>
                      <Icon type="ios-checkmark" v-if="val.status == 3"/>
                    </div>
                    <div :class="val.status == 2?'pc_text chooseNodeText':'pc_text'" v-if="index != 2">{{val.name}}
                    </div>
                    <div
                        :class="detailInfo.system_type == 0?'pc_text cantNode':val.status == 2?'pc_text chooseNodeText':'pc_text'"
                        v-else>{{val.name}}
                    </div>
                    <div class="jt" v-if="val.is_step == 1">
                      <div class="triangle_border_up"><span></span></div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- 内容组件 -->
            <div class="ci_con">
              <Drawer placement="left" :closable="false" v-model="drawerShow">
                <div class="drawerContent">
                  <div class="dc_con" v-for="(items,index) in detailInfo.step_list">
                    <div class="titles">
                      <div class="dcc_left"></div>
                      <span class="dcc_title">
                        {{items.name}}
                        <i-switch size="small" v-model="detailInfo.system_type == 0?false:true" @on-change="change" v-if="index == 2"/>
                      </span>
                    </div>
                    <div class="nodes" v-for="(val,ind) in items.item" @click="pointClick(val)">
                      <div class="dcc_left">
                        <div :class="{'dccl_point arivePoint': val.is_step == 1,
                                      'dccl_point noArive':val.status == 1,
                                      'dccl_point nowP':val.status == 2,
                                      'dccl_point':val.status == 3,
                                      'dccl_point signing': val.status == 4}" v-if="index != 2">
                          <Icon type="ios-checkmark" v-if="val.status == 3 && val.is_step != 1"/>
                        </div>
                        <div :class="{'dccl_point arivePoint': val.is_step == 1 && detailInfo.system_type == 1,
                                      'dccl_point noArive':val.status == 1 && detailInfo.system_type == 1,
                                      'dccl_point nowP':val.status == 2 && detailInfo.system_type == 1,
                                      'dccl_point':val.status == 3 && detailInfo.system_type == 1,
                                      'dccl_point signing': val.status == 4 && detailInfo.system_type == 1,
                                      'dccl_point cantPoint': detailInfo.system_type == 0}" v-else>
                          <Icon type="ios-checkmark" v-if="val.status == 3 && val.is_step != 1"/>
                        </div>
                      </div>
                      <div v-if="index != 2" :class="{'dcc_right':val.step != detailInfo.step,
                                    'dcc_right dcc_nowNode':val.step == detailInfo.step,}">{{val.name}}</div>
                      <div v-if="index == 2" :class="{'dcc_right':val.step != detailInfo.step && detailInfo.system_type == true,
                                                      'dcc_right dcc_nowNode':val.step == detailInfo.step && detailInfo.system_type == true,
                                                      'dcc_right dcc_cantChoose':detailInfo.system_type == false,}">{{val.name}}</div>
                    </div>
                  </div>
                </div>
              </Drawer>
              <div class="cc_title" @click="phoneStyle?drawerShow = true:drawerShow = false">{{detailInfo.publicTitle}}</div>
              <div class="cc_cards" v-if="cards.length > 0 && detailInfo.step == 1">
                <div class="ccc_title">问题引用</div>
                <div class="cards">
                  <div class="card" v-for="(cardItem,cindex) in cards">
                    <div class="delteCard" @click="deleteQuote(cardItem)"><Icon type="ios-close-circle" /></div>
                    <div class="title" v-html="cardItem.is_type == 1?'问题引用':cardItem.is_type == 2?'指标引用':cardItem.is_type == 3?'表单引用':cardItem.is_type == 4?'记录引用':'未知引用'"></div>
                    <div class="cardContent is_type1" @click="cardClick(cardItem)" v-if="cardItem.is_type == 1">
                      <div class="cardConTitle">
                        <span class="font">{{cardItem.name}}</span>
                        <span :class="{'colorGreen':cardItem.score == 'A','colorYellow':cardItem.score == 'B','colorRed':cardItem.score == 'C'}" v-if="cardItem.score != undefined && cardItem.score != null">{{cardItem.score}}</span>
                      </div>
                      <div class="card_content">
                        <div class="card_category">
                          <span class="it1Title">{{cardItem.data.category}}:</span>
                          <span class="it1Value">{{cardItem.data.problem_category}}</span>
                        </div>
                        <div class="card_user">
                          <span class="it1Title">{{cardItem.data.user_name}}:</span>
                          <span class="it1Value">{{cardItem.data.header_user_name}}</span>
                        </div>
                        <div class="card_satus">
                          <span class="it1Title">{{cardItem.data.status_name}}:</span>
                          <span :class="{'it1Value solution':detailInfo.problem_status == 1,'it1Value closed':detailInfo.problem_status == 0}">{{returnStatusQuote(cardItem.data.satus)}}</span>
                        </div>
                      </div>
                    </div>
                    <div class="cardContent is_type2" @click="cardClick(cardItem)" v-if="cardItem.is_type == 2">
                      <div class="cardConTitle">
                        <span class="font">{{cardItem.name}}</span>
                        <span :class="{'colorGreen':cardItem.score == 'A','colorYellow':cardItem.score == 'B','colorRed':cardItem.score == 'C'}" v-if="cardItem.score != undefined && cardItem.score != null">{{cardItem.score}}</span>
                      </div>
                      <div class="card_content">{{cardItem.data.title}}</div>
                    </div>
                    <div class="cardContent is_type3" @click="cardClick(cardItem)" v-if="cardItem.is_type == 3">
                      <div class="cardConTitle">
                        <span class="font">{{cardItem.name}}</span>
                        <span :class="{'colorGreen':cardItem.score == '5','colorYellow':cardItem.score == '4','colorRed':cardItem.score == '3','colorRed':cardItem.score == '2','colorRed':cardItem.score == '1','colorRed':cardItem.score == '0'}"
                              v-if="cardItem.score != undefined && cardItem.score != null">{{cardItem.score}}分</span>
                      </div>
                      <div class="card_content" v-if="cardItem.content.length > 0">
                        <div class="card_labes" v-for="citem in cardItem.content">
                          <span class="cl_title">{{citem.name}}:</span>
                          <span class="cl_value">{{citem.reach_rate}}</span>
                        </div>
                      </div>
                      <div class="card_labes_text" v-else>暂无数据</div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="cc_ques" v-for="(item,index) in detailInfo.list">
                <div class="cq_title">
                  {{item.name}}
                  <div
                      :class="{'level blueL': detailInfo.grade_id == 0,'level yellowL': detailInfo.grade_id == 1,'level orangeL': detailInfo.grade_id == 2,'level redL': detailInfo.grade_id == 3,'level garyL': detailInfo.grade_id == 4}"
                      v-if="item.type == 2">
                    问题等级：{{returnColor(detailInfo.grade_id)}}
                  </div>
                  <span class="upstateTitle" @click="upstateInfo(item,1)"
                        v-if="item.cont != '' && item.type != 7 && item.type != 8 && item.type != 11 && item.type != 15 && item.type != 16 && detailInfo.problem_status != 3 && detailInfo.problem_status != 2 && detailInfo.trials_status == 0">点击修改</span>
                </div>
                <div class="cq_content" v-html="item.cont" v-if="item.cont != '' && item.cont != undefined"></div>
                <div class="cq_content nullContent" v-if="item.cont == '' && item.cont != undefined && item.type != 16"
                     @click="upstateInfo(item,0)">+ 填写{{item.name}}
                </div>
                <!-- 特殊数组列表 -->
                <div class="cq_content cq_lists">
                  <!-- 质量处理 -->
                  <div class="cq_list" v-if="item.type == 7 && item.quality_list.length > 0">
                    <div class="cl_con" v-for="ite in item.quality_list">
                      <div class="clc_top">
                        <span class="clct_name">{{ite.title}}</span>
                        <span class="upstateCN" @click="qualityClick(1)">修改</span>
                        <span class="deleteCN" @click="deleteQualityAll(ite)">删除</span>
                      </div>
                      <div class="clc_bottom">{{ite.quality_cont}}</div>
                    </div>
                    <div class="cl_con" @click="qualityClick(0)">+ 添加质量处理项</div>
                  </div>
                  <div class="cq_list" v-if="item.type == 7 &&  item.quality_list.length == 0">
                    <div class="cl_con" @click="qualityClick(0)">+ 添加质量处理项</div>
                  </div>
                  <!-- 供应商选项 -->
                  <div class="cq_list" v-if="item.type == 8 && item.supplier_list.length > 0">
                    <div class="cl_con" v-for="ite in item.supplier_list">
                      <div class="clc_top">
                        <span class="clct_name">{{ite.name}}</span>
                        <span class="upstateCN" @click="updateSupplier(ite,1)" v-if="item.step != 9">修改</span>
                        <span class="deleteCN" @click="deleteSupplier(ite)" v-if="item.step != 9">删除</span>
                      </div>
                      <div class="clc_bottom" v-html="ite.cont"></div>
                    </div>
                    <div class="cl_con" @click="updateSupplier(null,0)" v-if="item.step != 9">+ 添加供应商问题信息</div>
                  </div>
                  <div class="cq_list" v-if="item.type == 8 && item.supplier_list.length == 0 && item.step != 9">
                    <div class="cl_con" @click="updateSupplier(null,0)">+ 添加供应商问题信息</div>
                  </div>
                  <!-- 团队组建 -->
                  <div class="teamList" v-if="item.type == 11 && item.team_list.length > 0">
                    <Card class="tl_con" v-for="ite in item.team_list">
                      <div class="deleteCon" @click="deletePerSon(ite)">
                        <Icon type="md-close"/>
                      </div>
                      <div class="tlc_top">
                        <div class="tlct_left">
                          <div class="tlctl_tx"><img :src="ite.avatar"/></div>
                          <div class="tlctl_name">{{ite.name}}
                            <div class="leader" v-if="ite.type == 1">leader</div>
                          </div>
                        </div>
                        <div class="tlct_right">
                          <span class="tlctr_tel">{{ite.mobile}}</span>
                          <span class="tlctr_position">{{ite.position}}</span>
                        </div>
                      </div>
                      <div class="tlc_bottom">
                        <div class="tlcb_left"></div>
                        <div class="tlcb_right" v-if="ite.type == 0" @click="leaderClick(ite)">设为leader</div>
                      </div>
                    </Card>
                    <Card class="addTeam">
                      <div class="addT" @click="addPerson">
                        <Icon type="md-add"/>
                        <span class="addTeamText">添加成员</span>
                      </div>
                    </Card>
                  </div>
                  <div class="teamList" v-if="item.type == 11 && item.team_list.length == 0">
                    <Card class="addTeam">
                      <div class="addT" @click="addPerson">
                        <Icon type="md-add"/>
                        <span class="addTeamText">添加成员</span>
                      </div>
                    </Card>
                  </div>
                  <!-- 标签 -->
                  <div class="labelsList" v-if="item.type == 16 && item.label_list.length > 0">
                    <div class="labels" v-for="ite in item.label_list">{{ite.title}}</div>
                    <div class="addlabels" @click="addLabelsClick">+ 添加标签</div>
                  </div>
                  <div class="labelsList" v-if="item.type == 16 && item.label_list.length == 0"><span
                      class="nullContent" @click="addLabelsClick">+ 添加标签</span></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="entryDiv" v-if="showEntry">
          <entry :entryData="entryData" @saveEntry="saveEntry"></entry>
        </div>
        <div class="quality" v-if="showQuality">
          <quality :qualityId="qualityId" :qualityType="qualityType" @save="saveQuality"></quality>
        </div>
        <div class="perSon" v-if="showPerSon">
          <personnel :personData="personData" @save="savePerson"></personnel>
        </div>
        <div class="addLabelDiv" v-if="showAddLabel">
          <addLabel :labelData="labelData" @save="saveAddLabel"></addLabel>
        </div>
        <div class="signDiv" v-if="showSign">
          <signResult :signData="signData" @save="saveSignSave()"></signResult>
        </div>
        <div class="handleDiv" v-if="showHandle">
          <handle :handleData="handleData" @save="handleSave"></handle>
        </div>
        <quote :entryData="entryDataQuote" v-if="showQuote" @saveEntry="saveEntryQuote"></quote>
      </div>
    </Col>
  </Row>
</template>

<script>
  import cookie from 'js-cookie';
  import NavLeft from '@/components/NavLeft';
  import NavMiddle from '@/components/NavMiddle';
  import entry from '@/views/assembly/entryForQuestion'
  import quality from '@/views/assembly/qualityTreatment'
  import personnel from '@/views/assembly/personnelSelection'
  import addLabel from '@/views/assembly/addLabel'
  import signResult from '@/views/assembly/signResult'
  import handle from '@/views/assembly/handle'
  import quote from '../../assembly/entryForQuote'

  export default {
    name: "questionDetail",
    data() {
      return {
        itemList: [],
        avatar: "",
        detailInfo: {},
        showEntry: false,
        entryData: {},
        showQuality: false,
        qualityId: '',
        qualityType: 0,
        showPerSon: false,
        personData: {},
        showAddLabel: false,
        labelData: {},
        showSign: false,
        signData: {},
        showHandle: false,
        handleData: {},
        cards: [],
        showQuote: false,
        entryDataQuote: {},
        phoneStyle: false,
        showTitle: true,
        drawerShow: false,
        chooseDate: cookie.get('chooseDate'),
      }
    },
    components: {
      NavLeft: NavLeft,
      NavMiddle: NavMiddle,
      entry: entry,
      quality: quality,
      personnel: personnel,
      addLabel: addLabel,
      signResult: signResult,
      handle: handle,
      quote: quote
    },
    watch: {
      $route() {
        this.getData();
        this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
        if (this.$route.query.quoteShow != undefined) {
          if (this.$route.query.quoteShow) {
            this.saveEntryQuote()
          }
        }
      }
    },
    methods: {
      goback() {
        this.$router.go(-1)
      },
      getData() {
        var uid = cookie.get('uid');
        var token = cookie.get('token');
        if (!uid || !token) {
          //this.$Message.warning('请登录');
          //store.dispatch('setLoginStatus', 0)
          //window.location.reload()
        }
        this.$Loading.start();
        var str = {type: 'login', loginType: cookie.get('loginType'),ymd: this.chooseDate};
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/home', {alldata: strdata.alldata}).then((response) => {
          this.$Loading.finish();
          var res = this.$twjsdes.decrypt(response.data.alldata);
          if (res.status == -1 && res.data.backurl) {
            this.$Modal.warning({
              title: '提示',
              content: '请在企业微信授权登录后使用',
              onOk: () => {
                if (this.$twjsdes.isWechat() === true) {
                  window.location.href = res.data.backurl_oauth2
                } else {
                  window.location.href = res.data.backurl
                }
              }
            });

          } else if (res.status != 1) {
            this.$Message.error(res.msg);
          } else {
            this.itemList = res.data.list;
            this.avatar = res.data.avatar;
          }
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      getInfo(problem_id, step, uid) {
        this.$Loading.start();
        var str = {
          problem_id: problem_id,
          step: step,
          uid: uid,
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/problemdet', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          var str2 = {
            problem_id: problem_id,
            uid: uid
          };
          var strdata2 = this.$twjsdes.enstr(str2);
          this.$http.post(this.$API_URL + '/info/quote', {alldata: strdata2.alldata}).then((response2) => {
            var res2 = this.$twjsdes.decrypt(response2.data.alldata);
            // console.log(res2,'res2')
            this.cards = res2.data.list
            this.detailInfo = res.data
            this.$Loading.finish();
          }).catch(function (error) {
            this.$Modal.error({
              title: '提示',
              content: '网络连接错误，请检查后重试'
            });
            //console.log(error);
          });
          // console.log(res,'res')
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      returnColor(color) {
        switch (color) {
          case 0:
            return '蓝色';
          case 1:
            return '黄色';
          case 2:
            return '橙色';
          case 3:
            return '红色';
          case 4:
            return '其他';
        }
      },
      returnStatus(status) {
        let self = this
        switch (status) {
          case 0:
            return '待解决';
          case 1:
            return '解决中';
          case 2:
            return '暂停中';
          case 3:
            return '已关闭(' + self.detailInfo.finish_time + ')';
        }
      },
      returnStatusQuote(status) {
        let self = this
        console.log(status)
        switch (status) {
          case '0':
            return '待解决';
          case '1':
            return '解决中';
          case '2':
            return '暂停中';
          case '3':
            return '已关闭';
        }
      },
      change(status) {
        let self = this
        this.$Loading.start();
        var str = {
          problem_id: self.detailInfo.problem_id,
          type: status ? 1 : 2,
          uid: cookie.get('uid'),
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/Opensystem', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          this.$Loading.finish();
          this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      pointClick(val) {
        let self = this
        if (val.status != 1) {
          self.drawerShow = false
          this.$route.query.node = val.step
          this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
        }
      },
      upstateInfo(val, type) {
        let self = this
        if (self.detailInfo.problem_status != 3 && self.detailInfo.problem_status != 2) {
          if (self.detailInfo.trials_status != 0) {
            this.$Message.error('无修改权限');
          } else {
            val.title = type == 0 ? '添加' + val.name : '修改' + val.name
            if (val.type == 2) {
              val.grade_id = self.detailInfo.grade_id
            }
            val.problem_id = self.detailInfo.problem_id
            self.entryData = val
            self.showEntry = true
          }
        } else {
          this.$Message.error('请开启当前问题后再进行操作');
        }
      },
      saveEntry(val) {
        let self = this
        self.showEntry = false
        this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
      },
      updateSupplier(val, status) {
        let self = this
        let data = {}
        if (status == 1) {
          val.title = '修改供应商问题信息'
          val.type = 8
          self.entryData = val
        } else {
          data.title = '添加供应商问题信息'
          data.type = 8
          data.problem_id = self.detailInfo.problem_id
          self.entryData = data
        }
        self.showEntry = true
      },
      deleteSupplier(item) {
        let self = this
        this.$Loading.start();
        let str = {
          problem_id: item.problem_id,
          problem_supplier_id: item.problem_supplier_id,
          uid: cookie.get('uid')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/supplierdel', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          this.$Loading.finish();
          this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
          this.$emit('saveEntry', self.entryData)
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      qualityClick(val) {
        let self = this
        self.qualityId = self.detailInfo.problem_id
        self.qualityType = val
        self.showQuality = true
      },
      deleteQualityAll(item) {
        let self = this
        this.$Loading.start();
        let str = {
          problem_id: item.problem_id,
          item_type: item.item_type,
          uid: cookie.get('uid')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/qualitybatchdel', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          this.$Loading.finish();
          this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
          this.$emit('saveEntry', self.entryData)
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      saveQuality(val) {
        let self = this
        self.showQuality = false
        this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
      },
      leaderClick(item) {
        let self = this
        this.$Loading.start();
        let str = {
          problem_id: self.detailInfo.problem_id,
          problem_team_id: item.problem_team_id,
          uid: cookie.get('uid')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/leadershe', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          this.$Loading.finish();
          this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
          this.$emit('saveEntry', self.entryData)
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      addPerson() {
        let self = this
        let data = {
          personType: 4,
          problem_id: self.detailInfo.problem_id
        }
        self.personData = data
        self.showPerSon = true
      },
      savePerson(val) {
        let self = this
        self.showPerSon = false
        this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
      },
      deletePerSon(item) {
        let self = this
        this.$Loading.start();
        var str = {
          problem_id: self.detailInfo.problem_id,
          problem_team_id: item.problem_team_id,
          uid: cookie.get('uid'),
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/teamadel', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          this.$Loading.finish();
          this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      saveAddLabel(val) {
        let self = this
        self.showAddLabel = false
        this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
      },
      addLabelsClick() {
        let self = this
        self.labelData = self.detailInfo.problem_id
        self.showAddLabel = true
      },
      assign() {
        let self = this
        let data = {
          personType: 3,
          problem_id: self.detailInfo.problem_id
        }
        self.personData = data
        self.showPerSon = true
      },
      updateQues() {
        let self = this
        self.$router.push('/item/question/questionNew?problemId=' + self.detailInfo.problem_id)
      },
      proStatus(index) {
        //1开启 2关闭 3暂停
        let self = this
        this.$Loading.start();
        var str = {
          problem_id: self.detailInfo.problem_id,
          type: index,
          uid: cookie.get('uid'),
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/pauseproblem', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          this.$Loading.finish();
          this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      trialsClick(index) {
        let self = this
        let data = {
          personType: index,
          problem_id: self.detailInfo.problem_id,
          step: self.detailInfo.step,
        }
        self.personData = data
        self.showPerSon = true
      },
      signResultClick(isHand) {
        let self = this
        let data = {
          problem_id: self.detailInfo.problem_id,
          step: self.detailInfo.step,
          isHand: isHand == 1 ? true : false
        }
        self.signData = data
        self.showSign = true
      },
      saveSignSave() {
        let self = this
        self.showSign = false
        this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
      },
      handleClick(type, isHand) {
        let self = this
        let data = {
          problem_id: self.detailInfo.problem_id,
          step: self.detailInfo.step,
          title: type == 1 ? '同意' : '不同意',
          type: type,
          cont: '',
          isHand: isHand == 1 ? true : false
        }
        self.handleData = data
        self.showHandle = true
      },
      handleSave() {
        let self = this
        self.showHandle = false
        this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
      },
      amendmentClick() {
        let self = this
        this.$Loading.start();
        var str = {
          problem_id: self.detailInfo.problem_id,
          step: self.detailInfo.step,
          uid: cookie.get('uid'),
          loginType: cookie.get('loginType')
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/item/applymodify', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          // console.log(res)
          this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
          this.$Loading.finish();
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
      cardClick(item) {
        let self = this
        cookie.set('chooseDate',item.ymd)
        localStorage.setItem('middleId',item.unit_id)
        item.query.isQuestion = true
        self.$router.push({
          path: item.route,
          query: item.query
        })
      },
      dropdownClick(val) {
        let self = this
        switch (val) {
          case '1': //分享
            break;
          case '2': //引用
            self.showQuote = true
            self.entryDataQuote = {
              type: 2,
              unit_id: self.$route.query.id,
              card: {
                is_type: 1,
                route: self.$route.path,
                fullPath: self.$route.fullPath,
                query: self.$route.query,
                ymd: self.chooseDate
              },
            }
            break
        }
      },
      saveEntryQuote() {
        let self = this
        self.showQuote = false
        self.entryDataQuote = {}
      },
      showMore() {
        let self = this
        self.showTitle = !self.showTitle
      },
      deleteQuote(item) {
        let self = this
        this.$Loading.start();
        var str = {
          uid: cookie.get('uid'),
          unit_id: self.$route.query.id,
          quote_id: item.quote_id
        };
        var strdata = this.$twjsdes.enstr(str);
        this.$http.post(this.$API_URL + '/info/quotedel', {alldata: strdata.alldata}).then((response) => {
          var res = this.$twjsdes.decrypt(response.data.alldata);
          // console.log(res)
          this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
          this.$Loading.finish();
        }).catch(function (error) {
          this.$Modal.error({
            title: '提示',
            content: '网络连接错误，请检查后重试'
          });
          //console.log(error);
        });
      },
    },
    created() {
      let self = this
      let dw = document.body.clientWidth
      if (dw < 820) {
        self.phoneStyle = true
        self.showTitle = false
      } else {
        self.phoneStyle = false
        self.showTitle = true
      }
      window.document.title = 'SCS';
      this.getData();
      this.getInfo(this.$route.query.problemId, this.$route.query.node, cookie.get('uid'))
    },
  }
</script>

<style lang="less" scoped>
  .questionDetail {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
    padding-bottom: 66px;
    box-sizing: border-box;
    .qd_title {
      width: 100%;
      height: 68px;
      line-height: 68px;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .qdt_left {
        font-size: 16px;
        color: rgb(70, 76, 91);
        cursor: pointer;
      }
      .qdt_center {
        font-size: 16px;
        font-weight: bold;
        color: rgb(70, 76, 91);
        text-align: center;
      }
      .qdt_right {
        height: 28px;
        margin-top: auto;
        margin-bottom: auto;
        display: flex;
        flex-direction: row;
        .btn_tools {
          padding: 6px 10px 6px 10px;
          background: #eee;
          border-radius: 20px;
          color: #666666;
          display: flex;
          flex-direction: column;
          justify-content: center;
          transition: color .2s ease-in-out;
        }
        .btn_tools:first-child {
          margin-right: 10px;
        }
        .btn_tools:hover {
          color: #57a3f3;
        }
      }
    }
    .topButtons{
      width: 100%;
      height: 50px;
      padding: 0 16px;
      box-sizing: border-box;
      background: #f9f9f9;
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      border-top-left-radius: 5px;
      border-top-right-radius: 5px;
      border: 1px solid #e1e1e1;
      border-bottom: none;
      .cit_right {
        display: flex;
        flex-direction: row;
        margin-top: auto;
        margin-bottom: auto;
        .button {
          height: 22px;
          line-height: 20px;
          padding: 0 5px;
          font-size: 12px;
          margin-right: 8px;
          cursor: pointer;
        }
        .button:last-child {
          margin-right: 0;
        }
        .chargePerson {
          background: #3384dd;
          color: #fff;
          border: 1px solid #3384dd;
        }
        .stop {
          border: 1px solid #3384dd;
          color: #3384dd;
        }
        .close {
          border: 1px solid #dc4444;
          color: #dc4444;
        }
      }
      .footer {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .buttons {
          display: flex;
          flex-direction: row;
          height: 30px;
          .is_trials{
            margin-top: auto;
            margin-bottom: auto;
          }
          button {
            margin-right: 8px;
          }
          button:last-child{
            margin-right: 0;
          }
        }
        .signStatus {
          font-size: 14px;
          line-height: 30px;
          color: #4eb240;
        }
        .signStatusCant {
          color: #dc4444;
        }
      }
    }
    .qd_content {
      display: flex;
      flex-direction: column;
      background: #fff;
      padding: 16px 0;
      border-radius: 5px;
      border: 1px solid #e1e1e1;
      border-top-left-radius: 0;
      border-top-right-radius: 0;
      .con_info {
        width: 100%;
        box-sizing: border-box;
        .ci_title {
          display: flex;
          flex-direction: row;
          justify-content: space-between;
          margin-bottom: 12px;
          padding: 0 16px;
          box-sizing: border-box;
          .cit_left {
            display: flex;
            flex-direction: row;
            .title {
              font-size: 16px;
              color: #333333;
              line-height: 22px;
              margin-right: 8px;
            }
            .level {
              width: 40px;
              height: 20px;
              line-height: 20px;
              text-align: center;
              font-size: 11px;
              color: #fff;
              border-radius: 3px;
              margin-right: 8px;
            }
            .blueL {
              background: #3384dd;
            }
            .yellowL {
              background: #f2ca51;
            }
            .orangeL {
              background: #ffb11b;
            }
            .redL {
              background: #f15c60;
            }
            .grayL {
              background: #cccccc;
            }
            .updateSpan {
              font-size: 12px;
              color: #3384dd;
              line-height: 22px;
              cursor: pointer;
            }
          }
        }
        .ci_labels {
          display: flex;
          flex-direction: row;
          flex-wrap: wrap;
          padding-bottom: 8px;
          padding: 0 16px;
          box-sizing: border-box;
          border-bottom: 1px solid #e1e1e1;
          .ci_label {
            font-size: 12px;
            color: #666666;
            margin-right: 37px;
            margin-bottom: 8px;
            .noCP {
              color: #dc4444;
            }
            .solution {
              color: #3384dd;
            }
            .closed {
              color: #dc4444;
            }
          }
        }
        .progress {
          display: flex;
          flex-direction: row;
          background: #f9f9f9;
          border-bottom: 1px solid #e1e1e1;
          width: 100%;
          height: 100px;
          .proCon {
            display: flex;
            flex-direction: row;
            justify-content: space-around;
            border-right: 1px solid #e1e1e1;
            position: relative;
            .proCon_node {
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              padding: 10px 0;
              box-sizing: border-box;
              .pc_title {
                font-size: 13px;
                color: #222222;
                text-align: center;
              }
              .pc_titleCant {
                color: #cccccc;
              }
              .pc_pointDiv {
                display: flex;
                flex-direction: column;
                position: relative;
                cursor: pointer;
                .pc_point {
                  width: 18px;
                  height: 18px;
                  border-radius: 50%;
                  border: 3px solid #3384dd;
                  margin-left: auto;
                  margin-right: auto;
                  margin-bottom: 4px;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  position: relative;
                  z-index: 2;
                  .ivu-icon {
                    font-size: 16px;
                    color: #3384dd;
                    position: absolute;
                    top: -2px;
                    left: -1px;
                  }
                }
                .noArive {
                  border-color: #999999;
                  cursor: not-allowed;
                }
                .arivePoint {
                  width: 22px;
                  height: 22px;
                  border: 6px solid #3384dd;
                  margin-bottom: 2px;
                }
                .signing, .nowP {
                  border-color: #3384dd;
                }
                .cantPoint {
                  border-color: #cccccc;
                }
                .pc_text {
                  font-size: 11px;
                  color: #666666;
                  text-align: center;
                }
                .cantNode {
                  color: #cccccc;
                }
                .chooseNodeText {
                  color: #3384dd;
                }
                .jt {
                  position: absolute;
                  left: 15%;
                  bottom: -11px;
                  z-index: 2;
                  .triangle_border_up {
                    width: 0;
                    height: 0;
                    border-width: 0 16px 11px;
                    border-style: solid;
                    border-color: transparent transparent #e1e1e1; /*透明 透明  灰*/
                    position: relative;
                  }
                  .triangle_border_up span {
                    display: block;
                    width: 0;
                    height: 0;
                    border-width: 0 15px 10px;
                    border-style: solid;
                    border-color: transparent transparent #fff; /*透明 透明  黄*/
                    position: absolute;
                    top: 2px;
                    left: -15px;
                  }
                }
              }
            }
          }
          .phenomenon, .experience {
            width: 10%;
          }
          .experience {
            .proCon_node:before {
              content: '';
              display: block;
              position: absolute;
              top: 59%;
              height: 2px;
              width: 88.5%;
              left: -44%;
              background: #999999;
            }
            .pnArive:before {
              background: #3384dd;
            }
          }
          .fast, .system {
            width: 40%;
          }
          .fast {
            .proCon_node:nth-child(1):before {
              content: '';
              display: block;
              position: absolute;
              top: 59%;
              height: 2px;
              width: 26.7%;
              left: -11.2%;
              background: #999999;
            }
            .proCon_node:nth-child(2):before {
              content: '';
              display: block;
              position: absolute;
              top: 59%;
              height: 2px;
              width: 30.8%;
              left: 18.2%;
              background: #999999;
            }
            .proCon_node:nth-child(3):before {
              content: '';
              display: block;
              position: absolute;
              top: 59%;
              height: 2px;
              width: 30.5%;
              left: 51.5%;
              background: #999999;
            }
            .pnArive:before {
              background: #3384dd !important;
            }
          }
          .system {
            .proCon_node:nth-child(1):before {
              content: '';
              display: block;
              position: absolute;
              top: 59%;
              height: 2px;
              width: 27.7%;
              left: -15.2%;
              background: #999999;
            }
            .proCon_node:nth-child(2):before {
              content: '';
              display: block;
              position: absolute;
              top: 59%;
              height: 2px;
              width: 23.5%;
              left: 14.8%;
              background: #999999;
            }
            .proCon_node:nth-child(3):before {
              content: '';
              display: block;
              position: absolute;
              top: 59%;
              height: 2px;
              width: 21.8%;
              left: 40.5%;
              background: #999999;
            }
            .proCon_node:nth-child(4):before {
              content: '';
              display: block;
              position: absolute;
              top: 59%;
              height: 2px;
              width: 22%;
              left: 64.5%;
              background: #999999;
            }
            .pnArive:before {
              background: #3384dd !important;
            }
          }
        }
        .ci_con {
          display: flex;
          flex-direction: column;
          .cc_cards{
            display: flex;
            flex-direction: column;
            padding: 0 16px;
            box-sizing: border-box;
            .ccc_title{
              display: flex;
              flex-direction: row;
              font-size: 14px;
              color: #333333;
              line-height: 20px;
              margin-bottom: 16px;
            }
            .cards{
              width: 100%;
              display: flex;
              flex-direction: row;
              flex-wrap: wrap;
              .card{
                display: flex;
                flex-direction: column;
                width: 45%;
                border: 1px solid #e5e5e5;
                border-radius: 4px;
                position: relative;
                .delteCard{
                  position: absolute;
                  right: -8px;
                  top: -8px;
                  cursor: pointer;
                  .ivu-icon{
                    font-size: 20px;
                    color: #f15c60;
                  }
                }
                .title{
                  width: 100%;
                  height: 33px;
                  line-height: 33px;
                  font-size: 13px;
                  color: #666666;
                  padding: 0 8px;
                  box-sizing: border-box;
                  background: #f9f9f9;
                  border-bottom: 1px solid #e5e5e5;
                }
                .cardContent{
                  padding: 0 8px;
                  box-sizing: border-box;
                  display: flex;
                  flex-direction: column;
                  background: #fff;
                  cursor: pointer;
                  .cardConTitle{
                    display: flex;
                    flex-direction: row;
                    height: 40px;
                    line-height: 40px;
                    font-size: 14px;
                    border-bottom: 1px dashed #e5e5e5;
                    .font{
                      color: #222222;
                      margin-right: 5px;
                      height: 40px;
                      overflow: hidden;
                      text-overflow:ellipsis;
                      white-space: nowrap;
                    }
                  }
                }
                .is_type1{
                  .card_content{
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    padding: 8px 0;
                    box-sizing: border-box;
                    .card_category{
                      width: 100%;
                    }
                    .card_user{
                      width: 50%;
                    }
                    .card_satus{
                      width: 50%;
                    }
                    .it1Title{
                      font-size: 12px;
                      color: #666666;
                    }
                    .it1Value{
                      font-size: 12px;
                      color: #666666;
                      margin-left: 5px;
                    }
                    .solution {
                      color: #3384dd;
                    }
                    .closed {
                      color: #dc4444;
                    }
                  }
                }
                .is_type2{
                  .card_content{
                    padding: 8px 0;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                  }
                }
                .is_type3{
                  .card_content{
                    padding: 8px 0;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: row;
                    flex-wrap: wrap;
                    .card_labes{
                      width: 50%;
                      display: flex;
                      flex-direction: row;
                      .cl_title{
                        line-height: 20px;
                        font-size: 12px;
                        color: #666666;
                      }
                      .cl_value{
                        line-height: 20px;
                        font-size: 12px;
                        color: #666666;
                        margin-left: 5px;
                      }
                    }
                  }
                  .card_labes_text{
                    padding: 8px 0;
                    box-sizing: border-box;
                    color: #666666;
                    font-size: 14px;
                    width: 100%;
                    text-align: left;
                  }
                }
              }
            }
          }
          .cc_title {
            font-size: 15px;
            color: #2d7ede;
            padding: 16px;
            padding-bottom: 0;
            box-sizing: border-box;
          }
          .cc_ques {
            display: flex;
            flex-direction: column;
            padding: 16px;
            box-sizing: border-box;
            border-bottom: 1px dashed #e5e5e5;
            .cq_title {
              display: flex;
              flex-direction: row;
              font-size: 14px;
              color: #333333;
              line-height: 20px;
              margin-bottom: 16px;
              .level {
                width: 96px;
                height: 20px;
                line-height: 20px;
                text-align: center;
                font-size: 11px;
                color: #fff;
                border-radius: 3px;
                margin-left: 8px;
              }
              .blueL {
                background: #3384dd;
              }
              .yellowL {
                background: #f2ca51;
              }
              .orangeL {
                background: #ffb11b;
              }
              .redL {
                background: #f15c60;
              }
              .garyL {
                background: #cccccc;
              }
              .upstateTitle {
                line-height: 20px;
                font-size: 12px;
                color: #3384dd;
                cursor: pointer;
                margin-left: 10px;
              }
            }
            .nullContent {
              width: 100%;
              height: 40px;
              background: #f9f9f9;
              border: 1px dashed #e5e5e5;
              text-align: center;
              line-height: 40px;
              font-size: 14px;
              color: #2d7ede;
              cursor: pointer;
            }
            .cq_lists {
              display: flex;
              flex-direction: column;
              .cq_list {
                display: flex;
                flex-direction: column;
                width: 100%;
                border: 1px solid #e5e5e5;
                .cl_con {
                  padding: 16px;
                  border-bottom: 1px solid #e5e5e5;
                  display: flex;
                  flex-direction: column;
                  .clc_top {
                    display: flex;
                    flex-direction: row;
                    margin-bottom: 8px;
                    .clct_name {
                      font-size: 15px;
                      color: #222222;
                      margin-right: 16px;
                      line-height: 15px;
                    }
                    .upstateCN {
                      line-height: 15px;
                      font-size: 13px;
                      color: #2d7ede;
                      margin-right: 8px;
                      cursor: pointer;
                    }
                    .deleteCN {
                      line-height: 15px;
                      font-size: 13px;
                      color: #dc4444;
                      cursor: pointer;
                    }
                  }
                  .clc_bottom {
                    font-size: 14px;
                    color: #666666;
                  }
                }
                .cl_con:last-child {
                  border-bottom: none;
                  font-size: 14px;
                  color: #2d7ede;
                  cursor: pointer;
                }
              }
              .teamList {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                .tl_con {
                  width: 49%;
                  margin-right: 1%;
                  margin-bottom: 10px;
                  display: flex;
                  flex-direction: column;
                  position: relative;
                  .deleteCon {
                    position: absolute;
                    top: 5px;
                    right: 5px;
                    .ivu-icon {
                      color: #fe3e3e;
                      font-size: 20px;
                      cursor: pointer;
                    }
                  }
                  .tlc_top {
                    width: 100%;
                    height: 84px;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    border-bottom: 1px solid #eeeeee;
                    padding-left: 16px;
                    padding-right: 16px;
                    box-sizing: border-box;
                    .tlct_left {
                      display: flex;
                      flex-direction: row;
                      .tlctl_tx {
                        width: 40px;
                        height: 40px;
                        border-radius: 50%;
                        overflow: hidden;
                        margin-right: 10px;
                        img {
                          width: 100%;
                          height: 100%;
                        }
                      }
                      .tlctl_name {
                        display: flex;
                        flex-direction: row;
                        font-size: 16px;
                        color: #222222;
                        line-height: 40px;
                        .leader {
                          width: 40px;
                          height: 15px;
                          line-height: 15px;
                          text-align: center;
                          color: #fff;
                          background: #3384dd;
                          font-size: 11px;
                          border-radius: 3px;
                          margin-left: 10px;
                          margin-top: 12px;
                        }
                      }
                    }
                    .tlct_right {
                      display: flex;
                      flex-direction: column;
                      .tlctr_tel {
                        font-size: 15px;
                        color: #666666;
                        line-height: 40px;
                      }
                      .tlctr_position {
                        font-size: 12px;
                        color: #999999;
                      }
                    }
                  }
                  .tlc_bottom {
                    width: 100%;
                    height: 30px;
                    background: #fafafa;
                    padding-left: 16px;
                    padding-right: 16px;
                    box-sizing: border-box;
                    display: flex;
                    flex-direction: row;
                    justify-content: space-between;
                    .tlcb_right {
                      font-size: 11px;
                      color: #378bf4;
                      line-height: 30px;
                      cursor: pointer;
                    }
                  }
                }
                .addTeam {
                  width: 140px;
                  margin-right: 1%;
                  margin-bottom: 10px;
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  position: relative;
                  cursor: pointer;
                  .addT {
                    width: 100%;
                    height: 100%;
                    display: flex;
                    flex-direction: column;
                    justify-content: center;
                    text-align: center;
                    color: #3384dd;
                    .ivu-icon {
                      font-size: 30px;
                    }
                    .addTeamText {
                      font-size: 12px;
                    }
                  }
                }
              }
              .labelsList {
                display: flex;
                flex-direction: row;
                .labels {
                  height: 30px;
                  line-height: 30px;
                  padding: 0 5px;
                  border-radius: 3px;
                  border: 1px solid #e5e5e5;
                  font-size: 14px;
                  color: #222222;
                  background: #f9f9f9;
                  margin-right: 10px;
                  margin-bottom: 5px;
                }
                .addlabels {
                  font-size: 14px;
                  color: #2d7ede;
                  line-height: 30px;
                  cursor: pointer;
                }
                .nullContent {
                  width: 100%;
                  height: 40px;
                  background: #f9f9f9;
                  border: 1px dashed #e5e5e5;
                  text-align: center;
                  line-height: 40px;
                  font-size: 14px;
                  color: #2d7ede;
                  cursor: pointer;
                }
              }
            }
          }
          .cc_ques:last-child {
            padding-bottom: 0;
            border-bottom: none;
          }
        }
      }
    }
    .entryDiv {
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 6;
    }
    .quality {
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 6;
    }
    .perSon {
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 6;
    }
    .addLabelDiv {
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 6;
    }
    .signDiv {
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 6;
    }
    .handleDiv {
      position: fixed;
      width: 100%;
      height: 100%;
      z-index: 6;
    }
  }
  /* 手机竖屏 */
  @media screen and (min-width: 0px) and (max-width: 820px) {
    #questionPhone1 {
      position: fixed;
      left: 0;
      bottom: 0;
      z-index: 99;
      width: 100%;
      height: 50px !important;
    }
    #questionPhone2{
      display: none;
    }
    #questionPhone3{
      width: 100%;
      padding-bottom: 66px !important;
      box-sizing: border-box;
      overflow-y: auto;
      .questionDetail{
        padding-left: 0;
        padding-right: 0;
        .qd_title{
          height: 50px;
          line-height: 50px;
        }
        .topButtons{
          border-radius: 0;
          border-left: none;
          border-right: none;
          padding: 0 8px;
        }
        .qd_content{
          border-left: none;
          border-right: none;
          padding-top: 8px;
          .con_info{
            .ci_title{
              padding: 0 8px;
              margin-bottom: 6px;
              box-sizing: border-box;
              .cit_left{
                width: 100%;
                .title{
                  max-width: 50%;
                  height: 20px;
                  overflow: hidden;
                  text-overflow: ellipsis;
                  white-space: nowrap;
                }
              }
            }
            .ci_labels{
              padding: 0 8px;
              position: relative;
              .ci_label{
                line-height: 12px;
                margin-right: 16px;
                margin-bottom: 8px;
              }
              .ci_label_more{
                position: absolute;
                top: 0;
                right: 8px;
                display: flex;
                flex-direction: row;
                .span{
                  font-size: 12px;
                  color: #666666;
                  line-height: 12px;
                }
                .ivu-icon{
                  font-size: 12px;
                  line-height: 12px;
                }
              }
            }
            .ci_con{
              .cc_title{
                padding: 0;
                padding-left: 8px;
                margin-top: 8px;
                width: 4rem;
                height: 1.5rem;
                line-height: 1.5rem;
                background: #4697ec;
                color: #fff;
                font-size: 12px;
                border-top-right-radius: 20px;
                border-bottom-right-radius: 20px;
              }
              .cc_ques{
                padding: 8px;
                .cq_title{
                  margin-bottom: 8px;
                }
                .cq_lists{
                  .cq_list{
                    .cl_con{
                      padding: 8px;
                    }
                  }
                  .teamList{
                    .tlc_top{
                      height: 70px;
                      padding: 0 8px;
                      .tlct_left{
                        .tlctl_tx{
                          width: 30px;
                          height: 30px;
                        }
                        .tlctl_name{
                          font-size: 12px;
                        }
                      }
                      .tlct_right{
                        .tlctr_tel{
                          font-size: 12px;
                        }
                      }
                    }
                  }
                }
              }
              .cc_cards{
                .ccc_title{
                  margin-bottom: 8px;
                }
                .cards{
                  width: 100%;
                  display: flex;
                  flex-direction: row;
                  flex-wrap: wrap;
                  .card{
                    display: flex;
                    flex-direction: column;
                    width: 45%;
                    border: 1px solid #e5e5e5;
                    border-radius: 4px;
                    cursor: pointer;
                    .title{
                      width: 100%;
                      height: 33px;
                      line-height: 33px;
                      font-size: 12px;
                      color: #666666;
                      padding: 0 8px;
                      box-sizing: border-box;
                      background: #f9f9f9;
                      border-bottom: 1px solid #e5e5e5;
                    }
                    .cardContent{
                      padding: 0 8px;
                      box-sizing: border-box;
                      display: flex;
                      flex-direction: column;
                      background: #fff;
                      .cardConTitle{
                        display: flex;
                        flex-direction: row;
                        height: 30px;
                        line-height: 30px;
                        font-size: 14px;
                        border-bottom: 1px dashed #e5e5e5;
                        .font{
                          color: #222222;
                          margin-right: 5px;
                          height: 40px;
                          max-width: 80%;
                          overflow: hidden;
                          text-overflow:ellipsis;
                          white-space: nowrap;
                        }
                      }
                    }
                    .is_type1{
                      .card_content{
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        padding: 8px 0;
                        box-sizing: border-box;
                        .card_category{
                          width: 100%;
                        }
                        .card_user{
                          width: 100%;
                        }
                        .card_satus{
                          width: 100%;
                        }
                        .it1Title{
                          font-size: 12px;
                          color: #666666;
                        }
                        .it1Value{
                          font-size: 12px;
                          color: #666666;
                          margin-left: 5px;
                        }
                        .solution {
                          color: #3384dd;
                        }
                        .closed {
                          color: #dc4444;
                        }
                      }
                    }
                    .is_type2{
                      .card_content{
                        padding: 8px 0;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        .card_labes{
                          width: 100%;
                        }
                      }
                    }
                    .is_type3{
                      .card_content{
                        padding: 8px 0;
                        box-sizing: border-box;
                        display: flex;
                        flex-direction: row;
                        flex-wrap: wrap;
                        .card_labes{
                          width: 100%;
                          display: flex;
                          flex-direction: row;
                          .cl_title{
                            line-height: 20px;
                            font-size: 12px;
                            color: #666666;
                          }
                          .cl_value{
                            line-height: 20px;
                            font-size: 12px;
                            color: #666666;
                            margin-left: 5px;
                          }
                        }
                      }
                      .card_labes_text{
                        padding: 8px 0;
                        box-sizing: border-box;
                        color: #666666;
                        font-size: 14px;
                        width: 100%;
                        text-align: left;
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }
    }
    .drawerContent{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding-top: 20%;
      box-sizing: border-box;
      .dc_con{
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        box-sizing: border-box;
        position: relative;
        .titles{
          width: 100%;
          display: flex;
          flex-direction: row;
          margin-bottom: 8px;
          .dcc_left{
            width: 30%;
          }
          .dcc_title{
            width: 70%;
            font-size: 12px;
            color: #999999;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .ivu-switch-small{
              margin-top: auto;
              margin-bottom: auto;
            }
          }
        }
        .nodes{
          width: 100%;
          display: flex;
          flex-direction: row;
          margin-bottom: 8px;
          .dcc_left{
            width: 30%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            position: relative;
            .dccl_point{
              width: 14px;
              height: 14px;
              border-radius: 50%;
              border: 2px solid #3384dd;
              margin-top: auto;
              margin-bottom: auto;
              .ivu-icon{
                color: #3384dd;
                position: absolute;
                top: 4px;
                left: 36%;
                font-size: 14px;
              }
            }
            .dccl_point:before{
              content: '';
              width: 2px;
              height: 69%;
              background: #3384dd;
              position: absolute;
              top: -51%;
              left: 48%;
            }
            .arivePoint{
              width: 22px;
              height: 22px;
              border: 8px solid #3384dd;
              z-index: 2;
            }
            .noArive{
              border-color: #999999;
              cursor: not-allowed;
            }
            .signing,.nowP {
              border-color: #3384dd;
            }
            .cantPoint {
              border-color: #cccccc;
            }
            .noArive:before,.cantPoint:before{
              background: #999999;
            }
          }
          .dcc_right{
            width: 70%;
            font-size: 14px;
            color: #222222;
            padding-left: 8px;
            box-sizing: border-box;
          }
          .dcc_nowNode{
            width: 47%;
            color: #fff;
            background: #4697ec;
            border-radius: 50px;
          }
          .dcc_cantChoose{
            color: #ccc;
          }
        }
        .nodes:last-child{
          margin-bottom: 0;
        }
        .nodes:nth-child(2){
          .dcc_left{
            .dccl_point:before{
              height: 245%;
              top: -215%;
            }
          }
        }
      }
      .dc_con:after{
        content: '';
        position: absolute;
        width: 70%;
        height: 1px;
        background: #e5e5e5;
        right: 0;
        bottom: 0;
      }
      .dc_con:first-child{
        .nodes:nth-child(2){
          .dcc_left{
            .dccl_point:before{
              display: none;
            }
          }
        }
      }
      .dc_con:last-child:after{
        display: none;
      }
    }
  }
  /* 手机横屏 */
  @media screen and (min-width: 450px) and (max-width: 820px) {
    .drawerContent{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction: column;
      padding-top: 20%;
      box-sizing: border-box;
      .dc_con{
        display: flex;
        flex-direction: column;
        padding: 8px 0;
        box-sizing: border-box;
        position: relative;
        .titles{
          width: 100%;
          display: flex;
          flex-direction: row;
          margin-bottom: 8px;
          .dcc_left{
            width: 30%;
          }
          .dcc_title{
            width: 70%;
            font-size: 12px;
            color: #999999;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            .ivu-switch-small{
              margin-top: auto;
              margin-bottom: auto;
            }
          }
        }
        .nodes{
          width: 100%;
          display: flex;
          flex-direction: row;
          margin-bottom: 8px;
          .dcc_left{
            width: 30%;
            display: flex;
            flex-direction: row;
            justify-content: center;
            position: relative;
            .dccl_point{
              width: 14px;
              height: 14px;
              border-radius: 50%;
              border: 2px solid #3384dd;
              margin-top: auto;
              margin-bottom: auto;
              .ivu-icon{
                color: #3384dd;
                position: absolute;
                top: 0px;
                left: 36%;
                font-size: 14px;
              }
            }
            .dccl_point:before{
              content: '';
              width: 2px;
              height: 69%;
              background: #3384dd;
              position: absolute;
              top: -56%;
              left: 48%;
            }
            .arivePoint{
              width: 20px;
              height: 20px;
              border: 7px solid #3384dd;
              z-index: 2;
            }
            .noArive{
              border-color: #999999;
              cursor: not-allowed;
            }
            .signing,.nowP {
              border-color: #3384dd;
            }
            .cantPoint {
              border-color: #cccccc;
            }
            .noArive:before,.cantPoint:before{
              background: #999999;
            }
          }
          .dcc_right{
            width: 70%;
            font-size: 12px;
            color: #222222;
            padding-left: 8px;
            box-sizing: border-box;
          }
          .dcc_nowNode{
            width: 47%;
            color: #fff;
            background: #4697ec;
            border-radius: 50px;
          }
          .dcc_cantChoose{
            color: #ccc;
          }
        }
        .nodes:last-child{
          margin-bottom: 0;
        }
        .nodes:nth-child(2){
          .dcc_left{
            .dccl_point:before{
              height: 270%;
              top: -267%;
            }
          }
        }
      }
      .dc_con:after{
        content: '';
        position: absolute;
        width: 70%;
        height: 1px;
        background: #e5e5e5;
        right: 0;
        bottom: 0;
      }
      .dc_con:first-child{
        .nodes:nth-child(2){
          .dcc_left{
            .dccl_point:before{
              display: none;
            }
          }
        }
      }
      .dc_con:last-child:after{
        display: none;
      }
    }
  }
</style>
